
<template>
  <div class="app-container" v-if="showLine">
  <el-divider content-position="center">计划产品信息</el-divider>
  <el-card shadow="always" class="box-card">
    <el-row :gutter="10" class="mb8" >
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAddLine"
          v-if="optType == 'save' || optType == 'edit'"
          v-hasPermi="['pro:outsourcingplan:add']"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table border v-loading="loading" :data="lineList" :key="outsourceType">
      <el-table-column label="产品编号" align="center" prop="productCode" >
      </el-table-column>
      <el-table-column label="产品名称" align="center" prop="productName" />
      <el-table-column label="规格型号" align="center" prop="specification" />
      <el-table-column label="单位" align="center" prop="unitOfMeasure" />
      <el-table-column
        v-for="col in columnsConfig"
        :key="col.prop"
        :label="col.label"
        :prop="col.prop"
        :width="col.width"
        :align="col.align"
        v-if="col.show">
      </el-table-column>
      <el-table-column v-if="outsourceType=='G'" label="工序编号" align="center" prop="processCode" />
      <el-table-column v-if="outsourceType=='G'" label="工序名称" align="center" prop="processName" />
      <el-table-column label="需求数量" align="center" prop="productQuantity"  width="180" fixed="right">
        <template slot-scope="scope">
          <el-input-number
            :key="'input-' + scope.row.id"
            :min="0.01"
            :step="0.01"
            :precision="2"
            type="number"
            size="mini"
            v-model="scope.row.productQuantity"
            v-if="optType == 'save' || optType == 'edit'"
          />

          <span v-else>{{scope.row.productQuantity}}</span>
        </template>
      </el-table-column>
      <!--          <el-table-column label="预估产品总价" align="center" prop="totalCost" />-->
      <el-table-column
        label="操作"
        fixed="right"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
        v-if="optType == 'save' || optType == 'edit'">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"

            @click="handleDeleteLine(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
    <!--选择商品信息弹出框-->
    <ItemSelect ref="itemSelect" item-or-product="PRODUCT" @onSelected="onItemSelected" > </ItemSelect>
    <SaleOrderLineSelect ref="saleOrderLineSelect" item-or-product="PRODUCT" :so-number="sourceCode" @onSelected="onSaleOrderLineSelected" > </SaleOrderLineSelect>
  </div>

</template>

<style scoped>

</style>

<script>
import ItemSelect from "@/components/itemSelect/single.vue";
import BomSelectSingle from "@/components/mdBomSelect/single.vue";
import Template from "@/views/print/printtemplate/list.vue";
import {getColumnsConfigKey} from "@/api/system/columnsconfig";
import SaleOrderLineSelect from "@/views/mes/pro/outsourcingplan/saleOrderLineSelect.vue";

export default {
  name: "PlanLine",
  components: {SaleOrderLineSelect, Template, BomSelectSingle, ItemSelect},
  dicts: ['erp_payment_type'],
  props: {
    sourceType:{
      type: String,
      default: ''
    },
    sourceCode:{
      type: String,
      default: ''
    },
    showPlanLine:{
      type: Boolean,
      default: true
    },
    planLineList:{
      type: Array,
      default: () => []
    },
    planNumber: {
      type: String,
      default: null
    },
    editStatus: {
      type: String,
      default: 'view'
    },
    outsourceType:{
      type: String,
      default: 'Z'
    }
  },
  data() {
    return {
      columnsConfig:[],
      showLine: true,
      oldRow: {},
      lineList: this.planLineList,
      autoGenFlag: false,
      optType: this.editStatus,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 外协计划表格数据
      planList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        productCode: null,
        productName: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        planNo: [
          {required: true, message: "计划编号不能为空", trigger: "blur"}
        ], deadline: [
          {required: true, message: "需求截止日期不能为空", trigger: "blur"}
        ],
      }
    };
  },
watch: {
  planLineList:{
    handler(newValue, oldValue) {

      this.lineList = newValue;
    },
  },
  editStatus:{
    handler(newValue, oldValue) {
      this.optType = newValue;
    },
  },
},
  created() {
    this.getItemBase()
  },
  methods: {
    getItemBase(){
      getColumnsConfigKey('MdItem_Base').then(res=>{
        this.columnsConfig = JSON.parse(res.data);
      })
    },
    handleSelectLine(row){
      row.status = 1;
      this.$emit("selectLine", row);
    },
    /** 新增产品按钮操作 */
    handleAddLine() {
      if(this.sourceType=='ORDER'){
        if(this.sourceCode==''|| !this.sourceCode){
          this.$modal.msgError("请先选择销售订单！");
        }else {
          this.$refs.saleOrderLineSelect.showFlag = true;
        }
      }else{
        this.$refs.itemSelect.showFlag = true;
      }

    },
    handleSaveLine(row) {
      row.updateStatus = false;
      this.$emit("lineChange", this.lineList);
    },
    handleCancelLine(row) {
      row.productQuantity = this.oldRow.productQuantity;
      row.price = this.oldRow.price;
      row.totalCost = this.oldRow.totalCost;
      row.updateStatus = false;
    },
    /** 修改按钮操作 */
    handleUpdateLine(row) {
      this.oldRow.productQuantity = row.productQuantity;
      this.oldRow.price = row.price;
      this.oldRow.totalCost = row.totalCost;
      row.updateStatus = true;
    },
    handleDeleteLine(row) {
      this.$modal.confirm('是否确认删除这个产品吗？').then(() => {
        this.lineList.splice(this.lineList.indexOf(row), 1);
        this.$emit("lineChange", this.lineList);
      });
    },
    onSaleOrderLineSelected(obj){
      this.onItemSelected(obj);
    },
    //物料选择弹出框
    onItemSelected(obj) {
      let one = this.lineList.find(item => item.productCode === obj.itemCode);
      if (one) {
        this.$modal.msgError("该产品已添加");
        return;
      }
      //console.log(obj)
      /*let data = {
        productId: obj.itemId,
        productCode: obj.itemCode,
        productName: obj.itemName,
        specification: obj.specification,
        unitOfMeasure: obj.unitOfMeasure,
        price: obj.referencePrice,
        status: obj.status,
        productQuantity: null,
        totalCost: null,
        updateStatus: true,
      }*/
      let data={...obj};
      data.productId=obj.itemId;
      data.productCode= obj.itemCode;
      data.productName= obj.itemName;
      data.price=obj.referencePrice;
        if(this.sourceType=='ORDER'){
          data.productQuantity=obj.quantity;
        }else{
          data.productQuantity=0.01;
        }
      data.totalCost=null;
      data.updateStatus=true;
      this.lineList.push(data);
    },
  }
}
</script>
